<template>
  <div class="orders">
    <div class="orders_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">全部订单<i class="el-icon-close"></i></div>
    </div>
    <div class="orders_bottom">
      <div class="orders_bottom_new">
        <div class="orders_bottom_new_goods">
          <div class="orders_bottom_new_goods_btn"></div>
          <div class="orders_bottom_new_goods_screening">
            <div class="orders_bottom_new_goods_screening_left">
              <div class="orders_bottom_new_goods_screening_left_select">
                <i>订单状态</i>
                <el-select
                  v-model="selectValue"
                  placeholder="请选择"
                  @change="_selectFn"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item"
                    :value="index"
                    >{{ item }}
                  </el-option>
                </el-select>
              </div>
              <div class="orders_bottom_new_goods_screening_left_select">
                <i>下单时间</i>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="_getTime"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="orders_bottom_new_goods_screening_right">
              <el-input
                v-model="seachInfo"
                placeholder="请输入订单信息查询"
              ></el-input>
              <button @click="_toSeach">
                <i class="el-icon-search"></i>搜索
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="orders_bottom_table_box">
        <div class="orders_bottom_table">
          <table>
            <tr>
              <th>订单号</th>
              <th>下单时间</th>
              <th>商品</th>
              <th>数量</th>
              <th>价格</th>
              <th>买家</th>
              <th>配送</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>{{ v.order_code }}</td>
              <td>{{ v.create_time | dateformat("YYYY-MM-DD HH:mm:ss") }}</td>
              <!-- <td>{{}}</td> -->
              <td>kk</td>
              <td>{{ v.all_num }}</td>
              <td>{{ v.all_price }}</td>
              <td>{{ v.username }}</td>
              <td>
                {{
                  v.move_way == "1" ? "快递" : v.move_way == "2" ? "自提" : ""
                }}
              </td>
              <td>
                {{
                  v.order_status == "1"
                    ? "待付款"
                    : v.order_status == "2"
                    ? "待发货"
                    : v.order_status == "3"
                    ? "待收货"
                    : v.order_status == "4"
                    ? "已完成"
                    : "已关闭"
                }}
              </td>
              <td>
                <button
                  class="editor"
                  @click="_toShopInfo"
                  :data-id="v.id"
                  :data-status="v.order_status"
                >
                  详情
                </button>
                <button
                  class="shelves"
                  v-if="v.order_status != '4' && v.order_status != '5'"
                  @click="_changStatus"
                >
                  {{
                    v.order_status == "1"
                      ? "确认付款"
                      : v.order_status == "2"
                      ? "发货"
                      : v.order_status == "3"
                      ? "确认发货"
                      : ""
                  }}
                </button>
                <button
                  class="delete"
                  v-show="v.order_status != '4' && v.order_status != '5'"
                >
                  {{
                    v.order_status == "1"
                      ? "关闭订单"
                      : v.order_status == "2"
                      ? "关闭并退款"
                      : v.order_status == "3"
                      ? "物流修改"
                      : ""
                  }}
                </button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="orders_bottom_page">
      <div class="orders_bottom_page_left"></div>
      <div class="orders_bottom_page_right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seachInfo: "",
      ok: "",
      checkAll: false,
      selectValue: "",
      checkBoxAll: [], // 选中的数据
      tableList: [],
      options: ["待付款", "待发货", "待收货", "已完成", "已关闭"],
      value1: [], //时间
      page: 1,
      pagesize: 100,
      total: 0,
    };
  },
  mounted() {
    this._getOrdersList();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.page = 1
      this._getOrdersList();
      this._selectFn(this.selectValue);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this._getOrdersList();
    },
    // 获取全部订单
    _getOrdersList() {
      this.$axios
        .post("/api/admin/shop/productOrder/lst", {
          store_id: "1",
          order_status: "all",
          page: this.page,
          pagesize: this.pagesize,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.tableList = res.data.data ? res.data.data : [];
            this.total = res.data.count; //总条数
          }
        });
    },

    _selectFn(e) {
      //获取当前选择的订单状态列表
      let order_status = e + 1;
      this.selectValue = e;
      this.$axios
        .post("/api/admin/shop/productOrder/lst", {
          store_id: "1",
          order_status,
          page: this.page,
          pagesize: this.pagesize,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.tableList = res.data.data.data ? res.data.data.data : [];
            this.total = res.data.data.data.length; //总条数
          }
          console.log(res);
        });
    },

    _getTime(e) {
      //选择时间并转换为时间戳 并获取数据列表
      console.log(e);
      let time = e.map((item) => {
        return item.getTime();
      });
      console.log(time);
      this.value1 = time;
      let order_status = this.selectValue !== "" ? this.selectValue + 1 : "all";
      this.$axios
        .post("/api/admin/shop/productOrder/lst", {
          store_id: "1",
          order_status,
          start_date: this.value1[0],
          end_date: this.value1[1],
          page: this.page,
          pagesize: this.pagesize,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.tableList = res.data.data.data ? res.data.data.data : [];
            this.total = res.data.data.data.length; //总条数
          }
          console.log(res);
        });
    },

    //点击搜索按钮
    _toSeach() {
      let order_status = this.selectValue !== "" ? this.selectValue + 1 : "all";
      console.log(order_status);
      console.log(this.value1[0]);
      this.$http
        .post("/api/admin/shop/productOrder/lst", {
          store_id: "1",
          order_status,
          start_date: this.value1[0],
          end_date: this.value1[1],
          keyword: this.seachInfo,
        })
        .then((res) => {
          console.log(res);
        });
    },

    //点击详情跳转
    _toShopInfo(e) {
      console.log(e);
      let order_id = e.target.dataset.id;
      let order_status = e.target.dataset.status;
      if (order_status == "1") {
        //判断此条数据订单状态跳转到对应详情页
        this.$router.push({ path: `/paymentDetails?order_id=${order_id}` });
      } else if (order_status == "2") {
        this.$router.push({ path: `/sendDetails?order_id=${order_id}` });
      } else if (order_status == "3") {
        this.$router.push({ path: `/forDetails?order_id=${order_id}` });
      } else if (order_status == "4") {
        this.$router.push({ path: `/completedDetails?order_id=${order_id}` });
      } else if (order_status == "5") {
        this.$router.push({ path: `/closedDetails?order_id=${order_id}` });
      }
    },

    _changStatus(e) {},
  },
};
</script>


<style lang="less" scoped="scoped">
@import "orders.less";
</style>
